<template>
	<div>
		<div class="spts-box">
			<p class="rqdp-sok">
				<span class="rqdp-size">
				人气单品
				</span>
			</p>
			<ul class="lh">
				<li v-for="item in goods" :key="item.id" @click="toDetails(item.id)">
					<img :src="item.goodsImgUrl" alt="">
					<span>{{item.name}}</span>
					<p>￥{{item.price}}</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default {
	name: 'FrontendVue2PopularRecommendation',
	props:[
		"goods"
	],
	data() {
		
		return {
			
		};
	},

	mounted() {
		
	},

	methods: {
		toDetails(id){

			this.$emit("load",id)
      this.$router.push(
        {
          path:"/Details/details",
          query:{
            id: id
          }
        }
      );
    },
	},
};
</script>

<style lang="less" scoped>
.spts-box{
		width: 1200px;
		height: 350px;
		// background-color: aquamarine;
		.rqdp-sok{
			padding: 10px 15px 15px 0px;
			border-bottom: 3px solid #f56c6c;
		}
		.rqdp-size{
			background-color: #f56c6c;
			padding: 11px 15px 16px 15px;
			color: white;
		}
		.lh{
		display: flex;
		justify-content: space-around;
		li{
			margin: 20px 20px;
			display: flex;
			flex-direction: column;
			// justify-content: center;
			align-items: center;
			  /* 设置固定的宽度 */
				width: 400px;
		 /* 裁剪多余的 */
		 overflow : hidden;

		 /* 将对象作为弹性伸缩盒子模型显示 */
		//  display: -webkit-box;
		 /* 限制再一个块元素再文本显示的行数 */
		 -webkit-line-clamp: 2;
		 -webkit-box-orient: vertical;
			img{
				width: 150px;
			}
			span{
				height: 60px;
				margin-top: 5px;
				color: black;
				font-size: 15px;
				font-weight: 500;

						 /* 多余的以省略号出现 */
			 text-overflow: ellipsis;
			 overflow : hidden;

			}
			p{
				margin-top: 5px;
				color: #f56c6c;
				font-size: 18px;
				font-weight: 600;
			}
		}
	}
	}

</style>